<template>
  <div>
    <el-dialog
      title="举报信息"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <div class="description">
        <div class="title">举报人信息</div>
        <div class="acea-row">
          <div class="description-term">用户名：{{ reportDetail.username ? reportDetail.username : '无' }}</div>
          <div class="description-term">真实姓名：{{ reportDetail.realName ? reportDetail.realName : '无' }}</div>
          <div class="description-term">邮箱：{{ reportDetail.email ? reportDetail.email : '无' }}</div>
          <div class="description-term">联系电话：{{ reportDetail.phone ? reportDetail.phone : '无' }}</div>
        </div>
        <div class="acea-row" />
        <el-divider />
        <div class="title">房源信息</div>
        <div class="acea-row">
          <div class="description-term">标题：{{ reportDetail.houseTitle }}</div>
          <div class="description-term">所在区域：{{ reportDetail.houseDistrict }}</div>
          <div class="description-term">详细地址：{{ reportDetail.houseAddress }}</div>
          <div class="description-term">房间格局：{{ reportDetail.houseRoom + "房" + reportDetail.houseParlor + "厅" + reportDetail.houseLavatory + "卫" }}</div>
          <div v-if="reportDetail.type === 0" class="description-term">租金：{{ reportDetail.housePrice }}</div>
          <div v-if="reportDetail.type === 1" class="description-term">售价：{{ reportDetail.housePrice }}</div>
          <div class="description-term" style="width: 100%">简介：{{ reportDetail.houseIntroduce }}</div>
        </div>
        <div v-if="reportDetail.housePic" class="acea-row">
          <el-image v-if="reportDetail.imgIn" style="width: 100px; height: 100px" :src="reportDetail.imgIn" :preview-src-list="[reportDetail.imgIn]" />
        </div>
        <el-divider />
        <div class="title">举报信息</div>
        <div class="acea-row">
          <div class="description-term">是否处理：{{ reportDetail.isHandle ? '已处理' : '未处理' }}</div>
          <div v-if="reportDetail.isHandle" class="description-term">处理结果：{{ reportDetail.handleResult ? '已下架' : '未下架' }}</div>
          <div class="description-term">举报时间：{{ dateFormat(reportDetail.createTime) }}</div>
        </div>
        <div class="acea-row">
          <div class="description-term" style="width: 100%">举报理由：{{ reportDetail.reason }}</div>
        </div>
        <div v-if="!reportDetail.isHandle" style="text-align: right">
          <el-button size="small" type="danger" @click="handleRefuse()">拒绝</el-button>
          <el-button size="small" type="primary" @click="handlePass()">通过</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { passReport, refuseReport } from '@/api/report'
export default {
  name: 'ReportDetail',
  props: {
  },
  data() {
    return {
      reportDetail: null,
      dialogVisible: true,
      reason: '',
      title: '异常原因'
    }
  },
  mounted() {

  },
  methods: {
    getReportDetail(report) {
      console.log('report')
      console.log(report)
      this.reportDetail = report
    },
    handlePass() {
      var that = this
      if (!this.reportDetail.isHandle) {
        passReport(
          {
            id: this.reportDetail.id
          }
        ).then(res => {
          console.log(res)
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          if (res) {
            that.reasonDialogVisible = false
            that.dialogVisible = false
            that.reason = ''
          }
        })
      }
    },
    handleRefuse() {
      var that = this
      if (!this.reportDetail.isHandle) {
        refuseReport(
          {
            id: this.reportDetail.id
          }
        ).then(res => {
          console.log(res)
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          if (res) {
            that.reasonDialogVisible = false
            that.dialogVisible = false
            that.reason = ''
          }
        })
      }
    },
    // 时间格式化
    dateFormat(time) {
      var t = new Date(time)// row 表示一行数据, createTime 表示要格式化的字段名称
      if (!t) {
        return ''
      }
      const year = t.getFullYear()
      const month = this.dateIfAddZero(t.getMonth() + 1)
      const day = this.dateIfAddZero(t.getDate())
      const hours = this.dateIfAddZero(t.getHours())
      const minutes = this.dateIfAddZero(t.getMinutes())
      const seconds = this.dateIfAddZero(t.getSeconds())
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },
    dateIfAddZero: function(time) {
      return time < 10 ? '0' + time : time
    }
  }
}
</script>

<style scoped lang="scss">
.logistics {
  align-items: center;
  padding: 10px 0px;
  .logistics_img {
    width: 45px;
    height: 45px;
    margin-right: 12px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .logistics_cent {
    span {
      display: block;
      font-size: 12px;
    }
  }
}

.trees-coadd {
  width: 100%;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
  .scollhide {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    .content {
      font-size: 12px;
    }

    .time {
      font-size: 12px;
      color: #2d8cf0;
    }

  }
}

.title {
  margin-bottom: 10px;
  color: #17233d;
  font-weight: 500;
  font-size: 14px;
}

.description {
  &-term {
    display: table-cell;
    padding-bottom: 5px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
  }
  ::v-deep .el-divider--horizontal {
    margin: 12px 0 !important;
  }
}

</style>
